<?php
	$data_sensor = array("wheeldropCaster", "wheeldropLeft", "wheeldropRight", /*"bumpLeft", "bumpRight",*/ "wall", 
		"cliffLeft", "cliffFronLeft", "cliffFrontRight", "cliffRight", "virtualWall", "infraredByte",
		"advance", "play", "distance", "angle", "chargingState", "voltage", "current", /*"batteryTemperature", 
		"batteryCharge", "batteryCapacity",*/ "wallSignal", "cliffLeftSignal", "cliffFrontLeftSignal", "cliffFrontRightSignal",
		"cliffRightSignal", "homeBase", /*"internalCharger",*/ "songNumber", "songPlaying");
	$data_odom = array('pose.pose.position.x', 'pose.pose.position.y', 'pose.pose.position.z',
		'pose.pose.orientation.x', 'pose.pose.orientation.y', 'pose.pose.orientation.z','pose.covariance',
		'twist.twist.linear.x', 'twist.twist.linear.y', 'twist.twist.linear.z',
		'twist.twist.angular.x', 'twist.twist.angular.y', 'twist.twist.angular.z', 'twist.covariance');
		
		
	$demos = array(
		1 => 'Cover', 2=>'Cover and dock', 3=>'Spot Cover', 4=>'Mouse', 5=>'Figure eight',
		6=>'Wimp', 7=>'Home', 8=>'Tag', 9=>'Pachebel', 10=>'Banjo'
	);
	
	$url 	= $_GET['url']?$_GET['url']:'omap';
	$port	= $_GET['port']?$_GET['port']:'9090';

	class create{
		public $js = array('js/processing-1.0.0.min.js', 'js/ros.min.js', 'js/ros_control.js', 'js/create.js');
		public $css = array('css/robot.css');
		public $onload = 'init(address, port);';
		
		function echo_javascript(){
			global $data_sensor, $data_odom, $url, $port;
			?>
			<script type="text/javascript">
			var address = '<?php echo $url;?>';
			var port = <?php echo $port;?>;
			
			function sensorPacketHandler(sensorPacket){
				var elem;
				//Bumpers
				if(sensorPacket.bumpRight){
					$('#bumper_right').addClass('pressed');
				}else{
					$('#bumper_right').removeClass('pressed');
				}
				if(sensorPacket.bumpLeft){
					$('#bumper_left').addClass('pressed');
				}else{
					$('#bumper_left').removeClass('pressed');
				}
				
				var charge = sensorPacket.batteryCharge / sensorPacket.batteryCapacity * 100;
				$('#battery').html('<p>' + charge + '% - ' + sensorPacket.batteryTemperature + 'ºC</p>');
				
				if(sensorPacket.internalCharger == true){
					$('#battery').addClass('plugged');
				}else{
					$('#battery').removeClass('plugged');
				}
				
				<?php
					foreach($data_sensor as $data){
						echo "\t\t\t//$data\n";
						
						echo "
							elem = \$('#sensor_$data');
							if(elem.val() == (sensorPacket.$data + '')){
								elem.removeClass('change');
							}else{
								elem.addClass('change');
								elem.val(sensorPacket.$data);
							}\n";
					}
				?>
				
			}
			
			function odomHandler(odom){
				var elem;

				<?php
					foreach($data_odom as $data){
						$field = str_replace('.', '_', $data);
						echo "\t\t\t//$data\n";
						
						echo "
							elem = \$('#odom_$field');
							if(elem.val() == (odom.$data + '')){
								elem.removeClass('change');
							}else{
								elem.addClass('change');
								elem.val(odom.$data);
							}\n";
					}
				?>
			}
			
			function log(msg){
				var log = $('#log');
				log.val(log.val() + "\n> " + msg);
			}
			
			function launch_demo(){
				var ndemo = document.getElementById('select_demo').value;
				alert('Launching demo: ' + ndemo);
				demo(ndemo);
			}

		</script>
			<?php
		}
		
		function echo_izq(){
			global $url, $port;
			
			?>
				Create address: <?php echo "$url:$port";?> 
				<input type="button" Value="Connect" onClick="run()" id="connect"/>
				<textarea class="log" id="log"></textarea>
				<!--canvas id="processing_canvas" data-processing-sources="pde/robot_control.pde"></canvas-->
			<?php
		} 
		
		function echo_centro(){
			global $demos, $url, $port;
			?>
					<!---------------------- ROBOT -------------------->
					<div class="robot" id="robot">
						<div class="bumpers" id="bumpers">
							<div class="bumper_left" id='bumper_left'></div>
							<div class="bumper_right" id='bumper_right'></div>
						</div>
						<div class="leds" id="leds"></div>
						<div class="bahia" id="bahia">
							<div class="battery plugged" id="battery"></div>
						</div>
					</div>
					<!---------------------- CONTROL -------------------->
					<div class="control" id="control">
						<table>
							<tr>
				    			<td>&nbsp;</td>
								<td>
									<input type="button" onclick="up();" value="Up" />
								</td>
								<td>&nbsp;</td>
			    			</tr>
			    			<tr>
								<td>
									<input type="button" onclick="left();" value="Left" />
								</td>
								<td>
									<input type="button" onclick="stop();" value="Stop" />
								</td>
								<td>
									<input type="button" onclick="right();" value="Right" />
								</td>
			    			</tr>
			    			<tr>
			    				<td>&nbsp;</td>
								<td>
									<input type="button" onclick="down();" value="Down" />
								</td>
								<td>&nbsp;</td>
			    			</tr>
			    			<tr>
			    				<td colspan="3">
			    					<select id="select_demo">
			    						<option value="0">Select one</option>
			    						<?php
			    							foreach($demos as $k=>$v){
			    								echo "<option value='$k'>$v</option>";
			    							}
			    						?>
			    					</select>
			    					
			    					<input type="button" value="Demo" onclick="launch_demo();"/>
			    				</td>
			    			</tr>
						</table>
					</div>
			<?php
		}
		
		function echo_der(){
			global $data_sensor, $data_odom;
			?>
					<!----------------------- DATA ---------------------->
					<table class="data sensor">
						<tr><th class="title" colspan="2">Sensor</th></tr>
			    		<?php
			    			foreach($data_sensor as $data){
			    				echo "<tr><th>$data:</th><td><input type='text'  id='sensor_$data' value='' /></td></tr>";
			    			}
			    		?>
			    	</table>
			    	
			    	<table class="data odom">
			    		<tr><th class="title" colspan="2">Odom</th></tr>
			    		<?php
			    			foreach($data_odom as $data){
			    				$field = str_replace('.', '_', $data);
			    				echo "<tr><th>$data:</th><td><input type='text'  id='odom_$field' value='' /></td></tr>";
			    			}
						?>
			    	</table>
			<?php
		}
	}
?>